import styles from './index.less';
import { Button } from 'antd';
import { connect, ConnectProps } from 'umi';
import { IGlobalState } from '../../models/global';
import { FC, useMemo } from 'react';

interface IProps extends ConnectProps {
  store: IGlobalState;
}

const IndexPage: FC<IProps> = ({ store, dispatch }) => {
  const user = useMemo(() => {
    return store.user;
  }, [store]);

  const handleClick = () => {
    dispatch!({
      type: 'global/login',
      payload: {},
    });
  };
  return (
    <div>
      <h1 className={styles.title}>{user.name}</h1>
      <h3>{user.age}</h3>
      {user.like.map((item: string, index: number) => {
        return <p key={index}>{item}</p>;
      })}
      <Button onClick={handleClick}>按钮</Button>
    </div>
  );
};

export default connect(({ global }: { global: IGlobalState }) => {
  return {
    store: global,
  };
})(IndexPage);
